<template>
	<div class="my-box">
		<div class="header"><TopTab></TopTab></div>
		<div class="cnont-box">
			<div class="my-title">
				<router-link to="" class="my-img-box"><img src="https://img02.hua.com/pc/assets/img/avatar_default_07.jpg" alt="sss" /></router-link>
				<div class="my-name">
					<p>{{ this.thisUser.userName }}</p>
					<span @click="logout">退出登录</span>
				</div>
			</div>
			<!-- 小功能 -->
			<div class="my-info">
				<!-- 订单 -->
				<div class="my-order-box">
					<p>
						我的订单
						<router-link to="/myOrder">
							全部订单
							<i class="iconfont iconfont-arrow-right"></i>
						</router-link>
					</p>
					<div class="my-entrance">
						<router-link to="" v-for="item in entranceImg" :key="item.index"><MyEntranceImg :img="item.img" :title="item.title"></MyEntranceImg></router-link>
					</div>
				</div>

				<!-- 其他 -->
				<div class="other-box">
					<div class="other-top">
						<router-link to="" v-for="iconItem in entranceIconOne" :key="iconItem.index">
							<MyEntranceIcon :icon="iconItem.icon" :title="iconItem.title"></MyEntranceIcon>
						</router-link>
					</div>
					<hr />
					<div class="other-bottom">
						<router-link to="" v-for="iconItemt in entranceIconOnet" :key="iconItemt.index">
							<MyEntranceIcon :icon="iconItemt.icon" :title="iconItemt.title"></MyEntranceIcon>
						</router-link>
					</div>
				</div>

				<!-- 系统 -->
				<div class="system-box">
					<router-link to="" v-for="iconTwo in entranceIconTwo" :key="iconTwo.index"><MyEntranceIcon :icon="iconTwo.icon" :title="iconTwo.title"></MyEntranceIcon></router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import MyEntranceImg from '@/components/myEntranceImg.vue';
import MyEntranceIcon from '@/components/myEntranceIcon.vue';
export default {
	// name: 'my',
	data() {
		return {
			entranceImg: [
				{
					img: 'https://img02.hua.com/m/member/center/myinfo_pendingpay.png',
					title: '待付款'
				},
				{
					img: 'https://img02.hua.com/m/member/center/myinfo_distribution.png',
					title: '今日配送'
				},
				{
					img: 'https://img02.hua.com/m/member/center/myinfo_evaluation.png',
					title: '待评价'
				}
			],
			entranceIconOne: [
				{
					icon: 'iconfont iconfont-coupon',
					title: '优惠券'
				},
				{
					icon: 'iconfont iconfont-equitycard',
					title: '权益卡'
				},
				{
					icon: 'iconfont iconfont-balance',
					title: '余额'
				},
				{
					icon: 'iconfont iconfont-diamond',
					title: '会员积分'
				}
			],
			entranceIconOnet: [
				{
					icon: 'iconfont iconfont-address',
					title: '收货地址'
				},
				{
					icon: 'iconfont iconfont-clock',
					title: '生日纪念提醒'
				},
				{
					icon: 'iconfont iconfont-collect',
					title: '我的收藏'
				},
				{
					icon: 'iconfont iconfont-pending',
					title: '浏览记录'
				}
			],
			entranceIconTwo: [
				{
					icon: 'iconfont iconfont-sevice',
					title: '联系客服'
				},
				{
					icon: 'iconfont iconfont-question',
					title: '帮助中心'
				},
				{
					icon: 'iconfont iconfont-info',
					title: '关于花礼'
				},
				{
					icon: 'iconfont iconfont-cog',
					title: '设置'
				}
			],
			thisUser: {}
		};
	},
	methods: {
		/* 退出登录 */
		logout(){
			// localStorage.clear("token");
			// localStorage.clear("thisUser");
			localStorage.setItem("token","")
			localStorage.setItem("thisUser","")
			this.$router.push('/home');
		}
	},
	created() {
		this.thisUser = JSON.parse(localStorage.getItem('thisUser'));
	},
	mounted() {
		document.querySelector('.cnont-box').style.height = document.documentElement.clientHeight + 'px';
	},
	components: { TopTab, MyEntranceImg, MyEntranceIcon }
};
</script>
<style scoped="scoped">
@import url('../css/publice.css');
@import url('https://img02.hua.com/res/iconfont/iconfont.css');
.header {
	position: fixed;
	top: 0;
	z-index: 3;
	width: 100%;
	padding-left: 0;
}

.cnont-box {
	position: fixed;
	top: 0.88rem;
	width: 100%;
	background: url(https://img02.hua.com/m/member/center/backgroundv3.png) no-repeat;
	background-size: 100% 2.64rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
	overflow: auto;
}

.my-title {
	width: 100%;
	height: 2.24rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.my-img-box {
	width: 1.2rem;
	height: 1.2rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 0.2rem;
}

.my-img-box img {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
}

.my-name {
	width: 2.2rem;
	height: 1.2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0.1rem 0;
	align-items: center;
}

.my-name p {
	width: 100%;
	color: white;
	text-align: center;
}

.my-name span {
	width: 1.4rem;
	height: 0.35rem;
	font-size: 0.2rem;
	background-color: #fe6600;
	border-radius: 0.2rem;
	text-align: center;
	color: white;
	line-height: 0.35rem;
}

.my-info {
	width: 95%;
}

.my-order-box {
	width: 100%;
	background-color: white;
	height: 2.32rem;
	border-radius: 0.15rem;
	padding: 0 0.2rem;
}

.my-order-box p {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 0.88rem;
	border-bottom: 0.01rem solid #ddd;
	font-size: 0.3rem;
}

.my-order-box p span {
	font-size: 0.25rem;
}

.my-entrance {
	width: 100%;
	height: 1.44rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.my-entrance a {
	width: 2.1rem;
	height: 0.96rem;
}

.other-box {
	margin-top: 0.2rem;
	width: 100%;
	height: 3.6rem;
	background-color: white;
	border-radius: 0.15rem;
}

.other-top {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 50%;
}

.other-box hr {
	border-color: #f5f5f5;
}

.other-bottom {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 50%;
}

.other-box a,
.system-box a {
	height: 1rem;
}

.system-box {
	width: 100%;
	height: 1.8rem;
	border-radius: 0.15rem;
	background-color: white;
	margin-top: 0.2rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
</style>
